<template>
  <div class="login-bg" oncontextmenu="return false;">
   <div class="login-wrap" >
     <div class="login-item" ondragstart="return false;">
       <img src="../../images/login-img.png" alt="" ondragstart="return false;">
     </div>
     <div class="login-box">
      <span style="text-align: left; display: inline-block;">
        <h2>莫愁智慧课堂</h2>
        <span class="subhead">用AI和大数据技术提高教学效率</span>
        <el-form :model="form" status-icon :rules="rules" label-position="top">
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model.trim="form.userName"
              class="imput-width"
              size="medium"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model.trim="form.password"
              class="imput-width"
              size="medium"
              prefix-icon="el-icon-lock"
              show-password
              placeholder="请输入密码" />
          </el-form-item>
        </el-form>
        <div class="button" @click="bindLogin">登录</div>
      </span>
     </div>
   </div>

    <div class="footer">{{ footerText }}  <a href="javascript:;"><p>苏ICP备10209000号</p></a></div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Login",
  components: {},
  data() {
    var validateUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 6) {
        callback(new Error("密码小于6位"));
      } else {
        callback();
      }
    };

    return {
      form: {
        userName: "",
        password: '',
      },
      rules: {
        userName: [
          { validator: validateUserName, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  props: {},

  computed: {
    ...mapState(["footerText"])
  },

  created() {},

  mounted() {},

  methods: {
    bindLogin() {
      this.$router.push( { path: '/real-time-monitor/index' } )
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../styles/variable";

.login-bg{
  width: 100%;
  height: 100vh;
  background: #cceaff;
  padding: 7% 0;
  color: #333333;

  .login-wrap{
    display: flex;
    align-items: center;
    padding: 0 12%;
    box-sizing: border-box;
    justify-content: space-around;
    /*border: 1px solid red;*/

    .login-item{
      width: 650px;
      height: 555px;
      margin-top: 5%;
      /*border: 1px solid red;*/
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;

      img{
        width: 100%;
        height: 100%;
      }
    }

    .login-box{
      width: 520px;
      height: 400px;
      margin-top: -3%;
      /*border: 1px solid red;*/
      background: #FFFFFF;
      border-radius: 10px;
      box-shadow: 0 30px 50px rgba(0, 0, 0, 0.08);
      text-align: center;
      padding-top: 40px;

      .subhead{
        font-size: 13px;
        color: #999999;
        letter-spacing: 1.2px;
      }

      .imput-width{
        width: 260px;
      }

      .button {
        width: 160px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: $default-color;
        font-size: 14px;
        border-radius: 1px;
        color: #FFFFFF;
        box-shadow: 0 10px 20px rgba(21, 105, 239, 0.3);
        margin-top: 30px;
        transition: all 0.3s;

        &:hover {
          background: $hover-color;
          cursor: pointer;
          box-shadow: 0 15px 30px rgba(22, 103, 233, 0.4);
        }

        &:active {
          background: $default-color;
        }
      }
    }
  }


}

.footer{
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%);
  color: #666666;
  display: flex;
  font-size: 13px;

  a {
    color: rgba(0, 0, 0, 0.5);
    margin-left: 16px;
    transition: all 0.3s;

    &:hover {
      color: $default-color;
    }
  }
}

.el-form >>> .el-form-item__label{
  padding: 0;
  line-height: 30px;
}

.el-form >>> .el-input__inner {
  border-radius: 1px;
}
</style>
